<template>
  <van-tabbar v-model="active" class="bottom-navigation">
    <van-tabbar-item
      v-for="(item, index) in tabs"
      :key="index"
      :icon="item.icon"
      @click="$Jump2(item.path)"
    >
      {{ item.label }}
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
  name: 'BOTTOMNAVIGATION',
  components: {
    'van-tabbar': Tabbar,
    'van-tabbar-item': TabbarItem
  },
  computed: {
    active: {
      get: function () {
        const map = {
          'home': 0,
          'search': 1,
          'my': 2
        }
        const path = window.location.pathname.replace(/\//g, '').replace(/.html/, '').replace(/calmax/, '')
        return map[path] || 0
      },
      set: function () {}
    }
  },  
  data () {
    return {
      tabs: [
        { label: '首页', icon: 'home-o', path: 'home' },
        { label: '搜索', icon: 'search', path: 'search' },
        { label: '我的', icon: 'setting-o', path: 'my'  }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.bottom-navigation {
  max-width: 375px;
  left: 50%;
  transform: translate(-50%, 0);
}
</style>
